<template>
  <div class="searchBar">

    <!-- element框架的消息提示 -->
    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <span class="el-icon-question details-icon"></span>
    </el-tooltip>

    <!-- 实现的显示隐藏 -->
    <!-- <div v-show="isOrderCnt" class="details ">数据原类型的解释</div> -->
    <!-- <span
      class="el-icon-question details-icon"
      @mouseenter="enters('CntShow')"
      @mouseleave="leaver('CntClose')"
    ></span> -->
    <span style="font-size: 14px"> 数据源类型 ：</span>
    <!-- 清空，
      选中变化触发，
      双向绑定，
      提示信息 -->
    <el-select
      clearable
      @change="changevalue"
      v-model="dataPanel"
      placeholder="请选择"
    >
      <!-- 循环，
      绑定 key 值，
      分组的名字，
      选项的值 -->
      <el-option
        v-for="item in tableData"
        :key="item.id"
        :label="item.dataSourceType"
        :value="item.id"
      ></el-option>
    </el-select>
    <!-- 样式，
      类型，
      尺寸，
      点击事件 -->
    <el-button
      style="margin-left: 30px"
      type="primary"
      size="small"
      @click="inquire"
      >查询</el-button
    >
    <el-button
      style="margin-left: 30px"
      type="primary"
      size="small"
      @click="search"
      >添加</el-button
    >
  </div>
</template>

<script>
import {
  DropDownList,
  PagingQuer,
  //   IndexNew,
  //   SourceUpdate,
  //   isLogin,
} from "@/assets/js/api";
import commentFn from "./conmmen";
export default {
  data() {
    return {
      // 显示隐藏
      isOrderCnt: false,
      // 数据源类型下拉框
      dataPanel: "",
      //表格数据
      tableData: [],
      // 向后台传的分页数据
      name: {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: null,
      },
      // 列表数据
      paging: [],
    };
  },
  created() {
    this.souarData();
  },
  methods: {
    // 鼠标进入
    enters(e) {
      if (e == "CntShow") {
        this.isOrderCnt = true;
      }
    },
    // 鼠标离开
    leaver(e) {
      if (e == "CntClose") {
        this.isOrderCnt = false;
      }
    },
    //   下拉选中事件
    changevalue(value) {
      this.dataPanel = value;
    },
    async souarData() {
      //调用列表接口
      let res = await DropDownList();
      if (res.code == 0) {
        this.tableData = res.data;
        this.itemtableData = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    //查询
    inquire() {
      this.name = {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: this.dataPanel,
      };
      this.PagingQuery(this.name);
      this.$emit("InquireAbout", this.name);
    },
    // 数据源分页查询
    async PagingQuery() {
      let res = await PagingQuer(this.name);
      if (res.code == 0) {
        //   获取总条数
        this.totalCount = res.data.totalCount;
        // 动态给每一项添加isClass
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.paging = res.data.list;
        this.ReplaceId();
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
      this.$emit("tabulation", this.paging);
      this.$emit("PagingTotal", this.totalCount);
    },
    // 替换id
    ReplaceId() {
      for (let i = 0; i < this.paging.length; i++) {
        commentFn.data.forEach((e, s) => {
          this.paging[i].dataSourceType == commentFn.data[s].id
            ? (this.paging[i].dataSourceType = commentFn.data[s].name)
            : "";
        });
      }
    },
    // 替换类型
    ReplaceType() {
      let item = this.ruleForm;
      commentFn.data.forEach((e, s) => {
        item.dataSourceType == commentFn.data[s].name
          ? (item.dataSourceType = commentFn.data[s].id)
          : "";
      });
    },
    // 添加按钮事件
    search() {
      this.$emit("Forbidden", (this.isEditTable = false));
      this.$emit("AddTo", (this.Modify = "添加"));
      this.$emit("OpenPopup", (this.isDialog = true));
      this.ResetData()
    },
    // 清空表单数据
    ResetData() {
      this.ruleForm = {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      };
      this.$emit("CallWay", this.ruleForm);
    },
  },
};
</script>

<style scoped>
.searchBar {
  height: 60px;
  line-height: 60px;
}
/* 隐藏的提示信息 */
.details {
  width: 280px;
  overflow: hidden;
  position: absolute;
  background-color: #9fa5b6;
  /* opacity: 0.6; */
  top: 68px;
  left: 233px;
  font-size: 14px;
  color: #0a0a0a;
  line-height: 20px;
  padding: 4px;
  border-radius: 3px;
  box-sizing: border-box;
}
/* 字体图标 */
.el-icon-question {
  color: rgb(182, 177, 177);
}
</style>